<!-- 反馈添加页面 -->
<script src="https://cdn.bootcss.com/plupload/2.1.8/plupload.full.min.js"></script>
<link rel="stylesheet" href="/css/topicApps_add.css">
<style type="text/css">
	.layui-form-pane {
	    padding: 25px 40px;
	}
	.price-num {
		display: inline-block;
		width: 140px;
		height: 30px;
	}
	.button-add {
	    display: block;
	    text-align: center;
	    width: 20%;
	    height: 40px;
	    line-height: 40px;
	    color: #fff;
	    background: linear-gradient(90deg, #29D5F6, #6840E0 );
	    border-radius: 2px;
	    border: 0;
	    box-shadow: 0 2px 17px 0 rgba(0,87,255,0.51);
	    cursor: pointer;
	}
	.symbols{
		width:100px;
		margin:0 0 10px -15px;
	}
	.darling{
		font-family: PingFangSC-Semibold;
		font-size: 14px;
		color: #565656;
		font-weight: bold;
		letter-spacing: 0;
	}
	.label-name{
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #5D5D5D;
		letter-spacing: 0;
	}
	.layui-form-pane .layui-form-label{
		color: #5D5D5D;
	}
	.action{
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #2C2C2C;
		letter-spacing: 0;
		margin-left: 110px;
	}
	.hint{
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #5D5D5D;
		letter-spacing: 0;
	}
	.edit-box{
		width: 100%;
		padding:10px 15px 11px 10px;
		margin:25px 0 30px 0;
	    background: #F7F7F7;
	    border: 1px solid #D9D9D9;
	    border-radius: 2px;
	}
	.upload-img{
		min-height:83px;
		width:100%;
		display:flex;
	}
	.upload-img .left{
		flex:0 0 50px;
		line-height:83px;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #707070;
		letter-spacing: 0;
	}
	.upload-img .right{
		flex:1;
		padding: 10px 0;
	}
	.upload-img-list li{
		float:left;
		position:relative;
	}
	.delete-icon{
	    position: absolute;
	    right: 0;
	    top: 0;
	    display: block;
	    width: 20px;
	    height: 20px;
	    background: url(/images/feedback/delete.png) no-repeat;
	    background-size:cover;
	}
	.upload-img .right img {
	    display: inline-block;
	    width:60px;
	    height:40px;
	    border: none;
	    margin: 10px 10px;
	}
	.btn-box{
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    width:60px;
	    height:40px;
	    margin: 10px 10px;
	    line-height:40px;
	    border: 2px dashed #ccc;
	    box-sizing: border-box;
	}
	.upload-btn{
		display:inline-block;
		width:30px;
		height:30px;
		background:url(/images/feedback/uploadImg.png) no-repeat;
		background-size:cover;
		cursor:pointer;
	}
	.button-add{
		width:134px;
		height:36px;
		line-height:36px;
	    margin: 49px auto 0;
	}
	/* 移动端样式 */
	/* @media screen  and (max-width: 850px),@media screen  and (orientation: landscape),
	only screen  and (max-device-width: 850px) {
		.main {
		    padding-top: 2.4rem;
		    padding-bottom: 0;
		}
		.layui-bar {
		    display: none;
		}
		.layui-form-pane {
		    padding: 0.4rem;
	        border-radius: 0.08rem;
		}
		.symbols {
		    width: 2.666667rem;
		    margin: 0 0 0.266667rem -0.1rem;
		}
		.darling {
		    font-size: 0.373333rem;
		    line-height: normal;
		}
		.hint {
		    font-size: 0.266667rem;
		    line-height: normal;
		}
		.edit-box {
		    width: 100%;
		    padding: 0.266667rem;
		    box-sizing: border-box;
		    margin:0 auto;
		    margin-top:0.2rem;
		    border: 0.026667rem solid #D9D9D9;
		    border-radius: 0.053333rem;
		}
		.textarea{
			box-sizing: border-box;
			line-height: normal;
		}
		textarea {
		    height: 3rem!important;
		}
		.upload-img {
		    min-height: 1.12rem;
		    width: 100%;
		    display: flex;
		}
		.upload-img .left {
		    flex: 0 0 1.333333rem;
		    line-height: 1.12rem;
		    font-size: 0.32rem;
		    line-height: 1.12rem;
		}
		.upload-img .right {
		    padding: 0.266667rem 0;
		}
		.btn-box {
		    width: 0.8rem;
		    height: 0.533333rem;
		    margin: 0.133333rem;
		    line-height: 0.533333rem;
		    border: 0.053333rem dashed #ccc;
		}
		.upload-img .right img {
		    width: 0.8rem;
		    height: inherit;
		    margin: 0.133333rem;
		}

	} */
</style>

<div class="main layui-clear">
	<div class="wrap layui-clear">
		<div class="layui-bar">
			<div class="layui-breadcrumbs">
				<a class="home" href="/"></a>
				<i class="layui-icon">&#xe602;</i>
		  		<a href="/admin/feedback/add.html">意见反馈</a>
			</div>
		</div>
		<div class="layui-form layui-form-pane">
			<form id="myForm" action="" method="post" onkeydown="if(event.keyCode==13){return false;}">
			
				<input type="hidden" lay-verify="checkImg"  name="feedbackenclosureList" id="feedbackenclosureList" placeholder="问题图片"/> 
				
				<img class="symbols" alt="" src="/images/feedback/symbols.png" >
				<p class="darling">亲爱的会员</p>
				<p class="hint">您在网站的浏览过程中，是否发现了什么问题呢？ 赶紧告诉我们吧！</p>
				<p class="hint">同时也希望 您能为我们社区的发展提出好的建议哟，盒子实验室 BOX LAB对您的反馈表示衷心感谢！</p>
				<div class="edit-box">
					<div class="textarea">
						<textarea id="feedbackcontent" name="feedbackcontent" lay-verify="required|checkContent" lay-verify="feedbackcontent" placeholder="请在此描述您遇到的问题或提出建议" style="width:100%;height: 160px;"></textarea>
					</div>
					<div class="upload-img">
						<div class="left layui-clear">问题截图</div>
						<div class="right layui-clear">
							<ul class="upload-img-list">
							</ul>
							<div class="btn-box">
								<span id="uploadBtn" class="upload-btn"></span>
							</div>
						</div>
					</div>
				</div>
				<p class="darling">我的信息</p>
				<div class="layui-form-item">
					<label for="parts" class="layui-form-label label-name">姓名</label>
					<div class="layui-input-inline">
						<input type="text" id="name" name="name" lay-verify="required|checkContent|name" autocomplete="off" class="layui-input" placeholder="请输入姓名">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="parts" class="layui-form-label label-name">手机号</label>
					<div class="layui-input-inline">
						<input type="text" id="telephone" name="telephone" lay-verify="required|telephone" autocomplete="off" class="layui-input"  placeholder="请输入手机号">
					</div>
				</div>
				<p class="action">我们会不定期的举办盒子实验室 BOX LAB活动日，邀请用户面对面的交流哦！</p>
				<p class="action">如果您有意参加请留下基本信息 （我们保证 盒子实验室 BOX LAB们的信息仅作为内部资料绝不外泄）</p>
				<div class="layui-form-item">
					<button class="layui-btn button-add" id="pay-btn" lay-filter="*" lay-submit="">提交</button>
				</div>
			</form>
		</div>
	</div>
</div>
<script>
var url = "/admin/feedback/upload";
var feedbackenclosureList = [];

layui.use(['laypage', 'layer', 'form', 'laydate'], function() {
	var form = layui.form();
	
	form.verify({
		  checkContent: function(value, item){ 
			  var status = "";
				$.ajax({
					  type:"POST",
					  url:"/checkConent",
					  data: {"content": value},
					  async: false,
					  success:function(data){
						 
						   var result = JSON.parse(data.requestmsg);
						   var resultsType = result.data[0].results[0].label;
						   if(result.data[0].results[0].suggestion!="pass"){
							   switch (resultsType)
								  {
								  case "spam":
									  status='您的内容包含垃圾信息';
								    break;
								  case "ad":
									  status='您的内容包含广告信息';
								    break;
								  case "politics":
									  status='您的内容包含渉政信息';
								    break;
								  case "terrorism":
									  status='您的内容包含暴恐信息';
								    break;
								  case "abuse":
									  status='您的内容包含辱骂信息';
								    break;
								  case "porn":
									  status='您的内容包含色情信息';
								    break;
								  case "flood":
									  status='您的内容包含灌水信息';
								    break;
								  case "contraband":
									  status='您的内容包含违禁信息';
								    break;
								  }
						   }
					  },
					  error:function(data){
						  console.log(data.requestmsg)
					  },
				  })
				  if(status!=""){
					  return status;
				  }
		  },
		  checkImg: function(value, item){ 
			  var data = [],status={};
			  if(feedbackenclosureList.length>0){
				 $.each(feedbackenclosureList,function(index,item){
				  	data.push({
				        "dataId": item.deleteId,
				        "url": "https://www.myboxlab.com/"+item.enclosureurl,
				  		"time":new Date()
				      }) 
				}) 
				var msg = msgSatatus(data);
			    if(msg!=""){
				  return msg;
			    }
			  }
			  
		  },
		  
		}); 
	form.on('submit(*)', function(data){
		submitData();
	});
	
	form.render(); //更新全部
});
  
  
//实例化一个plupload上传对象
var uploader = new plupload.Uploader({
	browse_button:"uploadBtn", //触发文件选择对话框的按钮，为那个元素id
    url: "${base}" + url, //服务器端的上传页面地址
    flash_swf_url: '${ctxStatic}/plupload/js//Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
    silverlight_xap_url: '${ctxStatic}/plupload/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
    filters: {
    	mime_types: [{
	            title: "Image files",
	            extensions: "jpg,jpeg,png,gif"
	        },
	
	    ],
        max_file_size: '40mb',
    },
});

//在实例对象上调用init()方法进行初始化
uploader.init();

//绑定各种事件，并在事件监听函数中做你想做的事
uploader.bind('FilesAdded',function(uploader,files){
	 $.each(files,function(index,item) {
			var $li = '<li id="li-' + item.id + '">' +
							'<img alt="" src="/images/loading-slide.gif">'+
							'<span class="delete-icon" id="' + item.id + '"></span>'+
					  '</li>';
			$('.upload-img-list').append($li);
		})
		//上传后删除事件
		$(".delete-icon").click(function() {
			var id = $(this).attr('id');
			uploader.removeFile(uploader.getFile(id))
			$.each(feedbackenclosureList,function(index,item) {
				if(item) {
					if(id == item.deleteId) {
						feedbackenclosureList.splice(index,1);
					}
				}
			})
			$("#li-" + id).remove();
		});
	
   uploader.start();
});

//上传后回调
uploader.bind('FileUploaded', function(uploader, UploadProgress, responseObject) {
	var obj = $.parseJSON(responseObject.response);
	$("#li-" + UploadProgress.id).find("img").attr("src","/" + obj.filePath + '');
	var json = {};
	json.enclosurename = obj.fileName;
	json.enclosureurl = obj.filePath;
	json.id = obj.fileId;
	json.deleteId = UploadProgress.id;
	json.filesize = Math.ceil(UploadProgress.origSize / 1024);
	
	feedbackenclosureList.push(json);
});

//报错
uploader.bind('Error', function(up, err) {
   if (err.code == '-600') {
   	layer.msg('文件最多可上传40M', {icon: 5});
   }
})

$(document).keyup(function(e) {
	var theEvent = window.event || e;
	var code = theEvent.keyCode || theEvent.which;
	if (code == 13) {
		submitData();//因为是ajax提交所以加了enter事件
	}
})

function submitData(){
	if($("#pay-btn").attr("disabled")){
		return false;
	}
	$("#pay-btn").attr("disabled",true);
	$("#pay-btn").html("正在提交...");
 	$("input[name=feedbackenclosureList]").val(JSON.stringify(feedbackenclosureList));
   
	$.ajax({
		type: "POST",
		url: "/admin/feedback/save.html",
		dataType: "text",
		data: $("#myForm").serialize(),
		async: false,
		beforeSend:function(){
			
		},
		success: function(data) {
			if(data == "success"){
				layer.open({
					  icon: 6, 
					  title:'提示',
					  skin: 'layui-layer-demo', //样式类名
					  closeBtn: 1, //不显示关闭按钮
					  shadeClose: true, //开启遮罩关闭
					  content: '非常感谢您的宝贵意见！',
					  btn: ['确定'],
					  yes: function(){
				          layer.closeAll();
						  window.location.href = "/";
				       }
				});
	       	 }else{
	       		 alert("失败！");
	       		 $("#pay-btn").attr("disabled",false);
	       		 $("#pay-btn").html("编辑完成");
	       	 }
		}
	});
}

</script>